<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>运行中的流程</title>
<link href="${ctx}/static/styles/workflow.css" rel="stylesheet" type="text/css" />
<script src="${ctx }/static/kl/workflow.js" type="text/javascript"></script>
<script type="text/javascript">
	var $grid;
	var ctx = '${ctx}';
	$(function() {
		$('#processDefinitionId').combobox({
			url : '${ctx}/bpm/console/pdCombobox',
			method : 'get',
			editable : false,
			idField : 'value',
			textField : 'text',
			dataPlain : true,
			panelWidth : 350
		});
		$grid = $("#grid")
				.datagrid(
						{
							title : '运行中的流程',
							method : "get",
							url : "${ctx}/workflow/activitiProcessInstance/running/dataGrid",
							idField : 'id',
							remoteSort : true,
							multiSort : true,
							//rownumbers : true,
							singleSelect:true,
							toolbar : '#tt',
							pagination : true,
							fit:true,
							pageList : [ 10, 20, 30, 40, 50, 100 ],
							columns : [ [
									{
										field : 'ck',
										checkbox : true
									},
									{
										field : 'id',
										title : '执行ID',
										sortable : true
									},
									{
										field : 'processInstanceId',
										title : '流程实例ID',
										sortable : true
									},
									{
										field : 'processDefinitionId',
										title : '流程定义ID',
										sortable : true
									},
									{
										field : 'activityName',
										title : '当前节点',
										formatter : function(value, row, index) {
											return "<a onclick='graphTrace(this);'  href='#' pid='" + row.id + "' title='点击查看流程图'>" + value
													+ "</a>";
										}
									},
									{
										field : 'suspended',
										title : '是否挂起',
										formatter : function(value, row, index) {
											if (value) {
												return "是";
											} else {
												return "否";
											}
										}
									},
									{
										field : 'action',
										title : '操作',
										formatter : function(value, row, index) {
											var result = "";
											if (row.suspended) {
												result += "<a class='active-btn' onclick='activeOrSuspend(\"active\",\"" + row.id
														+ "\")'>激活</a>";
											} else {
												result += "<a class='suspend-btn' onclick='activeOrSuspend(\"suspend\",\"" + row.id
														+ "\")'>挂起</a>";
											}
											result += "<a class='viewHistory-btn' href='#' onclick='viewTaskHistory(\"" + row.id
													+ "\")'>历史</a>";
											result += "<a class='migrate-btn' href='#' onclick='migrate(\"" + row.processInstanceId
													+ "\",\"" + row.processDefinitionId + "\")'>迁移</a>";
											return result;
										}
									} ] ],
							enableHeaderClickMenu : true, //此属性开启表头列名称右侧那个箭头形状的鼠标左键点击菜单
							enableHeaderContextMenu : true, //此属性开启表头列名称右键点击菜单
							enableRowContextMenu : false,
							onLoadSuccess : function(data) {
								$('.suspend-btn').linkbutton({
									iconCls : 'icon-cologne-premium',
									plain : true
								});
								$(".active-btn").linkbutton({
									iconCls : 'icon-cologne-star',
									plain : true
								});
								$(".viewHistory-btn").linkbutton({
									iconCls : 'icon-cologne-date',
									plain : true
								});
								$(".migrate-btn").linkbutton({
									iconCls : 'icon-hamburg-exchange',
									plain : true
								});
							}
						});
		$("#delete").click(
				function() {
					var rowData = $grid.datagrid("getSelected");
					if (rowData == null) {
						$.messager.show({
							msg : "您未选中行，无法删除",
							icon : "warning",
							position : "bottomRight"
						});
					} else {
						$.messager.confirm("您确定要进行该操作？", function(c) {
							if (c) {
								$.get("${ctx}/workflow/activitiProcessInstance/delete?processInstanceId=" + rowData.processInstanceId,
										function(result) {
											$.messager.show({
												msg : result.msg,
												icon : "info",
												position : "bottomRight"
											});
											if (result.success) {
												//$grid.datagrid("deleteRow", rowData);
												 $grid.datagrid('reload');
											}
										}, 'json');
							}
						});
					}
				});
	});
	function migrate(processInstanceId, processDefinitionId) {
		$("#fm").form("clear");
		$("#fm").form("load", {
			"processInstanceId" : processInstanceId
		});
		$("#dlg").dialog("open").dialog("setTitle", "选择流程定义");
	}
	function viewTaskHistory(processInstanceId) {
		window.parent.addTab("processHistory","流程实例[" + processInstanceId + "]历史信息",
				"${ctx}/bpm/confForm/task-viewHistory?processInstanceId=" + processInstanceId);
	}
	function activeOrSuspend(action, executionId) {
		$.get('${ctx}/workflow/activitiProcessInstance/update/' + action + '/' + executionId, function(data) {
			$grid.datagrid("load");
			$.messager.show({
				msg : data.msg,
				icon : "info",
				position : "bottomRight"
			});
		}, 'json');
	}
	function fn_save() {
		$("#fm").form("submit", {
			url : "${ctx}/bpm/console/migrate",
			success : function(data) {
				$grid.datagrid("load");
				$.messager.show({
					msg : data.msg,
					icon : "info",
					position : "bottomRight"
				});
				$("#dlg").dialog('close');
			}
		});
	}
</script>
</head>

<body class="easyui-layout" data-options="fit:true,border:false">
	<div data-options="region:'center',fit:true,border:false">
		<table id="grid">
		</table>
	</div>
	<div id="tt" class="row">
	<div class="col-md-4">
	<form class="form-grid-search form-inline">
				<div class="form-group">
					<input type="text" class="form-control" id="modelName" name="modelName" placeholder="模型名称" />
				</div>
				<button type="button" id="search" class="btn btn-primary">
					<span class="glyphicon glyphicon-search"></span> 查询
				</button>
			</form>
	</div>
		<div class="col-md-8">
		<button id="delete" type="button" class="btn btn-danger">
					<span class="glyphicon glyphicon-minus"></span> 删除流程实例
				</button>
		</div>
	</div>
	<div id="dlg" class="easyui-dialog" style="width: 360px; height: 180px; padding: 10px 20px"
		data-options="iconCls:'icon-save',resizable:true,modal:true,inline:false, buttons:[
                    { text: '保存', iconCls: 'icon-ok', handler: function () { fn_save(); } },
                    { text: '取消', iconCls:'icon-cancel', handler: function () { $('#dlg').dialog('close'); } }
                ],closed:true">
		<form id="fm" method="post">
			<input type="hidden" name="processInstanceId" />
			<fieldset style="border: solid 1px #aaa; padding: 3px;">
				<legend>编辑</legend>
				<table id="tbl">
					<tr>
						<td>流程定义:</td>
						<td><input id="processDefinitionId" name="processDefinitionId" class="easyui-validatebox" data-options="required:true"></td>
					</tr>
				</table>
			</fieldset>
		</form>
	</div>
</body>
</html>
